<template>
  <div class="supplier-quality-container">
    <!-- 主页面视图 -->
    <div v-if="currentView === 'main'" class="main-view">
      <div class="page-header">
        <h1 class="page-title">
          <el-icon class="title-icon">
            <Shop />
          </el-icon>
          供应商质量看板
        </h1>
        <el-button type="primary" size="large" @click="showAddSupplier" class="add-btn">
          <el-icon>
            <Plus />
          </el-icon>
          添加供应商
        </el-button>
      </div>

      <!-- 统计卡片区域 -->
      <div class="stat-cards">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon supplier-icon">
              <el-icon>
                <Shop />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">供应商总数</div>
              <div class="stat-card__number">{{ supplierData.length }}</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon quality-icon">
              <el-icon>
                <Medal />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">合格供应商</div>
              <div class="stat-card__number">{{ qualifiedSuppliers }}</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon rating-icon">
              <el-icon>
                <Star />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">平均合格率</div>
              <div class="stat-card__number">{{ averageQualityRating }}%</div>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-card__content">
            <div class="stat-card__icon supply-icon">
              <el-icon>
                <Box />
              </el-icon>
            </div>
            <div class="stat-card__info">
              <div class="stat-card__title">总合格供货量</div>
              <div class="stat-card__number">{{ monthlySupply }}</div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 供应商列表 -->
      <el-card class="data-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon>
                <List />
              </el-icon>
              供应商列表
            </span>
            <div class="header-actions">
              <el-input v-model="searchKeyword" placeholder="搜索供应商..." style="width: 200px; margin-right: 10px"
                clearable @input="querySuppliers">
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-button type="info" @click="handleExportList">
                <el-icon>
                  <Download />
                </el-icon>
                导出列表
              </el-button>
            </div>
          </div>
        </template>

        <el-table :data="supplierData" border style="width: 100%" class="supplier-table">
          <el-table-column prop="supplierId" label="供应商ID"  align="center" />
          <el-table-column prop="supplierName" label="供应商名称"  show-overflow-tooltip />
          <el-table-column prop="contact" label="联系方式" width="150" />
          <el-table-column prop="supplierCount" label="供货数量"  align="center" />
          <el-table-column prop="qualifyCount" label="合格数量"  align="center" />
          <el-table-column prop="qualityRating" label="合格率"  align="center">
            <template #default="scope">
              <el-tag :type="getQualityType(getSupplierQualityRate(scope.row))" size="small">
                {{ getSupplierQualityRate(scope.row) }}%
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewSupplierDetail(row)">
                <el-icon>
                  <View />
                </el-icon>详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="table-footer">
          <div class="table-info">显示 {{ (currentPage - 1) * pageSize + 1 }} 到 {{ Math.min(currentPage * pageSize,
            totalItems) }}
            条，共 {{ totalItems }} 条记录</div>
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 20]"
            layout="sizes, prev, pager, next" :total="totalItems" @current-change="handlePageChange"
            @size-change="handleSizeChange" />
        </div>
      </el-card>

      <!-- 供应商合格趋势图 -->
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="chart-header">
            <span class="chart-title">
              <el-icon>
                <TrendCharts />
              </el-icon>
              供应商合格趋势
            </span>
          </div>
        </template>
        <div class="chart-container">
          <div ref="trendChart" style="width: 100%; height: 350px;"></div>
        </div>
      </el-card>
    </div>

    <!-- 供应商详情/编辑视图 -->
    <div v-else-if="currentView === 'detail'" class="detail-view">
      <div class="detail-header">
        <el-button type="info" @click="goBack" class="back-btn">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回列表
        </el-button>
        <h2 class="detail-title">
          <el-icon>
            <User />
          </el-icon>
          {{ isEditing ? '编辑供应商' : '供应商详情' }}
        </h2>
        <div v-if="!isEditing" class="detail-actions">
          <el-button type="primary" @click="enableEdit">
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <el-button type="danger" @click="deleteSupplierBox(currentSupplier.supplierId)">
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
        </div>
      </div>

      <el-card class="detail-card" shadow="hover">
        <el-form :model="currentSupplier" label-width="120px" class="supplier-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="供应商ID">
                <el-input v-model="currentSupplier.supplierId" :disabled="!isEditing" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名称">
                <el-input v-model="currentSupplier.supplierName" :disabled="!isEditing" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系方式">
                <el-input v-model="currentSupplier.contact" :disabled="!isEditing" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货数量">
                <el-input-number v-model="currentSupplier.supplierCount" :disabled="!isEditing" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="合格数量">
                <el-input-number v-model="currentSupplier.qualifyCount" :disabled="!isEditing" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合格率">
                <el-input :value="getSupplierQualityRate(currentSupplier) + '%'" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div v-if="isEditing" class="form-actions">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveSupplier">保存</el-button>
        </div>
      </el-card>
    </div>

    <!-- 添加供应商对话框 -->
    <el-dialog v-model="addDialogVisible" title="添加供应商" width="600px" :before-close="handleAddDialogClose">
      <el-form :model="newSupplier" :rules="supplierRules" ref="addSupplierForm" label-width="120px">
        <el-form-item label="供应商名称" prop="supplier_name">
          <el-input v-model="newSupplier.supplierName" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="newSupplier.contact" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="供货数量" prop="supply_count">
          <el-input-number v-model="newSupplier.supplierCount" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="合格数量" prop="qualify_count">
          <el-input-number v-model="newSupplier.qualifyCount" :min="0" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addSupplier()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Shop, Plus, Medal, Star, Box, List, Search, Download,
  View, Edit, Delete, ArrowLeft, User, TrendCharts
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { querySupplierService, addSupplierService, updateSupplierService, deleteSupplierService } from '@/api/SupervisorApi'
import type { number } from 'echarts/core'

// 视图控制
const currentView = ref('main')
const isEditing = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(3)
const totalItems = ref(0)

// 搜索
const searchKeyword = ref('')

// 对话框控制
const addDialogVisible = ref(false)

// 图表相关
const trendChart = ref()
let trendChartInstance: echarts.ECharts | null = null

// 供应商数据
const supplierData = ref([
  {
    "supplierId": 0,
    "supplierName": "",
    "contact": "",
    "supplierCount": 0,
    "qualifyCount": 0,
    "qualityRating": 0
  }
])

// 当前选中的供应商
const currentSupplier = ref({
  "supplierId": 0,
  "supplierName": "",
  "contact": "",
  "supplierCount": 0,
  "qualifyCount": 0,
  "qualityRating": 0
})

// 新供应商数据
const newSupplier = ref({
  "supplierName": "",
  "contact": "",
  "supplierCount": 0,
  "qualifyCount": 0,
})

// 表单验证规则
const supplierRules = {
  supplierId: [{ required: true, message: '请输入供应商ID', trigger: 'blur' }],
  supplierName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  supplierCount: [{ required: true, message: '请输入供货数量', trigger: 'blur' }],
  qualifyCount: [{ required: true, message: '请输入合格数量', trigger: 'blur' }]
}

// 表单引用
const addSupplierForm = ref()

// 供应商合格率数据（基于实际数据生成柱状图）
const trendData = computed(() => {
  const companies: string[] = []
  const qualityRateData: number[] = []
  
  // 为每个供应商获取合格率数据
  supplierData.value.forEach((supplier: any) => {
    companies.push(supplier.supplierName)
    qualityRateData.push(getSupplierQualityRate(supplier))
  })
  
  return {
    companies,
    qualityRateData
  }
})

// 计算属性
const qualifiedSuppliers = computed(() => {
  return supplierData.value.filter((supplier: any) => {
    if (supplier.supplierCount === 0) return false
    const qualityRate = (supplier.qualifyCount / supplier.supplierCount) * 100
    return qualityRate >= 95
  }).length
})

const averageQualityRating = computed(() => {
  if (supplierData.value.length === 0) return 0
  const total = supplierData.value.reduce((sum: number, supplier: any) => {
    if (supplier.supplierCount === 0) return sum
    const qualityRate = (supplier.qualifyCount / supplier.supplierCount) * 100
    return sum + qualityRate
  }, 0)
  return Math.round(total / supplierData.value.length)
})

const monthlySupply = computed(() => {
  const total = supplierData.value.reduce((sum: number, supplier: any) => sum + Number(supplier.qualifyCount || 0), 0)
  return total.toLocaleString()
})

// 计算单个供应商的合格率
const getSupplierQualityRate = (supplier: any) => {
  if (!supplier || supplier.supplierCount === 0) return 0
  return Math.round((supplier.qualifyCount / supplier.supplierCount) * 100)
}

// 获取合格率对应的标签类型
const getQualityType = (rating: string | number) => {
  // 处理百分比字符串
  const numericRating = typeof rating === 'string' 
    ? parseFloat(rating.replace('%', '')) 
    : rating
  if (numericRating >= 98) return 'success'
  if (numericRating >= 95) return 'warning'
  return 'danger'
}

// 显示添加供应商对话框
const showAddSupplier = () => {
  addDialogVisible.value = true
  resetNewSupplier()
}

// 重置新供应商数据
const resetNewSupplier = () => {
  newSupplier.value = {
    supplierName: '',
    contact: '',
    supplierCount: 0,
    qualifyCount: 0,
  }
}

// 添加供应商
const addSupplier = async () => {
  if (!addSupplierForm.value) return
  let result = await addSupplierService(newSupplier.value)
  //提示添加成功
  ElMessage.success(result.data?.msg || '添加成功')
  // 刷新列表
  querySuppliers()
  resetNewSupplier()
}

// 处理添加对话框关闭
const handleAddDialogClose = () => {
  addSupplierForm.value?.resetFields()
}

// 查看供应商详情
const viewSupplierDetail = (supplier: any) => {
  currentSupplier.value = { ...supplier }
  currentView.value = 'detail'
  isEditing.value = false
}

// 启用编辑
const enableEdit = () => {
  isEditing.value = true
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  // 重新加载数据
  const originalSupplier = supplierData.value.find((s: any) => s.supplierId === currentSupplier.value.supplierId)
  if (originalSupplier) {
    currentSupplier.value = {
      ...originalSupplier
    }
  }
}

// 保存供应商
const saveSupplier = async () => {
  const result = await updateSupplierService(currentSupplier.value) as any
  ElMessage.success(result.msg || '保存成功')
  querySuppliers()
  isEditing.value = false
}

// 删除供应商
const deleteSupplier = async (supplierId: number) => {
  const result = await deleteSupplierService(supplierId) as any
  goBack()
  ElMessage.success(result.msg || '删除成功')
  querySuppliers()
}

// 删除弹窗
const deleteSupplierBox = (supplierId: number) => {
    //退出登录
    ElMessageBox.confirm(
        '确定删除该供应商吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(async () => {
            //删除学生
            deleteSupplier(supplierId)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 返回主页
const goBack = () => {
  currentView.value = 'main'
  isEditing.value = false
  // 返回主页时重新初始化图表
  nextTick(() => {
    initTrendChart()
  })
}

// 导出列表
const handleExportList = () => {
  ElMessage.success('导出功能开发中...')
}

// 页数变化处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  querySuppliers()
}

// 页面大小变化处理
const handleSizeChange = (size: number) => {
  pageSize.value = size
  querySuppliers()
}

// 初始化供应商合格率柱状图
const initTrendChart = () => {
  if (!trendChart.value) return
  
  // 检查数据是否存在
  if (!supplierData.value || supplierData.value.length === 0) {
    console.log('暂无供应商数据，跳过图表初始化')
    return
  }

  trendChartInstance = echarts.init(trendChart.value)
  
  // 获取图表数据
  const chartData = trendData.value
  console.log('图表数据:', chartData)

  const option = {
    title: {
      text: '各供应商合格率统计',
      left: 'center',
      textStyle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#303133'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#E4E7ED',
      borderWidth: 1,
      textStyle: {
        color: '#606266'
      },
      formatter: (params: any) => {
        const param = params[0]
        return `<div style="font-weight: bold; margin-bottom: 5px;">${param.axisValue}</div>
                <div style="margin: 2px 0;">
                  <span style="display: inline-block; width: 10px; height: 10px; background-color: ${param.color}; border-radius: 50%; margin-right: 5px;"></span>
                  合格率: <span style="font-weight: bold;">${param.value}%</span>
                </div>`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: chartData.companies,
      axisLabel: {
        fontSize: 12,
        color: '#606266',
        rotate: 45,
        interval: 0
      },
      axisLine: {
        lineStyle: {
          color: '#E4E7ED'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '合格率(%)',
      min: 0,
      max: 100,
      axisLabel: {
        fontSize: 12,
        color: '#606266',
        formatter: '{value}%'
      },
      axisLine: {
        lineStyle: {
          color: '#E4E7ED'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#F2F6FC'
        }
      }
    },
    series: [{
      name: '合格率',
      type: 'bar',
      data: chartData.qualityRateData,
      barWidth: '60%',
      itemStyle: {
        color: (params: any) => {
          // 根据合格率动态设置颜色
          const value = params.value
          if (value >= 98) {
            // 优秀：绿色渐变
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#a8e6cf' },
              { offset: 0.5, color: '#56c596' },
              { offset: 1, color: '#2d8659' }
            ])
          } else if (value >= 95) {
            // 良好：蓝色渐变
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#87ceeb' },
              { offset: 0.5, color: '#4682b4' },
              { offset: 1, color: '#1e3a8a' }
            ])
          } else if (value >= 90) {
            // 一般：橙色渐变
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ffd89b' },
              { offset: 0.5, color: '#ff9a56' },
              { offset: 1, color: '#e67e22' }
            ])
          } else {
            // 较差：红色渐变
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ffb3ba' },
              { offset: 0.5, color: '#ff6b6b' },
              { offset: 1, color: '#e74c3c' }
            ])
          }
        },
        borderRadius: [4, 4, 0, 0],
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
        shadowOffsetY: 2
      },
      emphasis: {
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 15,
          shadowOffsetY: 5
        },
        scale: true,
        scaleSize: 1.05
      },
      animationDelay: (idx: number) => idx * 100,
      animationDuration: 1000,
      animationEasing: 'elasticOut'
    }]
  }

  trendChartInstance.setOption(option)

  // 响应式调整
  window.addEventListener('resize', () => {
    trendChartInstance?.resize()
  })
}

// 组件挂载后初始化图表
onMounted(() => {
  nextTick(() => {
    querySuppliers()
  })
})

//分页查询供应商
const querySuppliers = async () => {
  let params = {
    pageNumber: currentPage.value,
    pageSize: pageSize.value,
    supplierName: searchKeyword.value ? searchKeyword.value : '',
  }
  let result = await querySupplierService(params)
  //渲染视图
  supplierData.value = result.data.records
  totalItems.value = result.data.total
  
  // 数据加载完成后初始化图表
  nextTick(() => {
    initTrendChart()
  })
}

</script>


<style lang="scss" scoped>
.supplier-quality-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  // 主页面视图样式
  .main-view {
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      .page-title {
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;

        .title-icon {
          font-size: 32px;
        }
      }

      .add-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        font-weight: bold;
        padding: 12px 24px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }
      }
    }

    .stat-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;

      .stat-card {
        border-radius: 12px;
        border: none;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        &__content {
          display: flex;
          align-items: center;
          padding: 24px;
          gap: 16px;
        }

        &__icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: #fff;

          &.supplier-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.quality-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.rating-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.supply-icon {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }

        &__info {
          flex: 1;
        }

        &__title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
          font-weight: 500;
        }

        &__number {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }

    .data-card {
      margin-bottom: 30px;
      border-radius: 12px;
      border: none;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-title {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .header-actions {
          display: flex;
          align-items: center;
        }
      }

      .supplier-table {
        border-radius: 8px;
        overflow: hidden;

        :deep(.el-table__header) {
          background: #f8f9fa;
        }

        :deep(.el-table__row:hover) {
          background: #f0f9ff;
        }
      }

      .table-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding: 16px 0;

        .table-info {
          color: #909399;
          font-size: 14px;
        }
      }
    }

    .chart-card {
      border-radius: 12px;
      border: none;

      .chart-header {
        .chart-title {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }

      .chart-container {
        padding: 20px;
      }
    }
  }

  // 详情页面视图样式
  .detail-view {
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      .back-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #fff;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }

      .detail-title {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .detail-actions {
        display: flex;
        gap: 12px;
      }
    }

    .detail-card {
      border-radius: 12px;
      border: none;

      .supplier-form {
        padding: 20px;

        :deep(.el-form-item__label) {
          font-weight: 600;
          color: #303133;
        }

        :deep(.el-input__wrapper) {
          border-radius: 8px;
        }

        :deep(.el-input.is-disabled .el-input__wrapper) {
          background-color: #f8f9fa;
        }
      }

      .form-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 20px;
        border-top: 1px solid #f0f0f0;
        margin-top: 20px;
      }
    }
  }

  // 对话框样式
  :deep(.el-dialog) {
    border-radius: 12px;

    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      border-radius: 12px 12px 0 0;

      .el-dialog__title {
        color: #fff;
        font-weight: bold;
      }
    }

    .el-form-item__label {
      font-weight: 600;
      color: #303133;
    }

    .el-input__wrapper {
      border-radius: 8px;
    }
  }

  // 按钮样式增强
  :deep(.el-button) {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-1px);
    }

    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
      }
    }

    &.el-button--warning {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #e081e9 0%, #e3455a 100%);
      }
    }

    &.el-button--danger {
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #ff888c 0%, #fdbedc 100%);
      }
    }
  }

  // 标签样式
  :deep(.el-tag) {
    border-radius: 6px;
    font-weight: 500;

    &.el-tag--success {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      border: none;
      color: #fff;
    }

    &.el-tag--warning {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      border: none;
      color: #fff;
    }

    &.el-tag--danger {
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      border: none;
      color: #fff;
    }
  }

  // 输入框样式
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px #409eff inset;
    }
  }

  // 分页样式
  :deep(.el-pagination) {
    .el-pager li {
      border-radius: 6px;
      margin: 0 2px;
    }

    .btn-prev,
    .btn-next {
      border-radius: 6px;
    }
  }
}
</style>